import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import styles from "./styles";

class Tab extends Component {
  constructor(props) {
    super(props);
    this.pressColor = "rgba(0,0,0,0.3)";
    const typeP = [false, false];
    this.tintColors = [];

    this.state = {
      typePress: typeP,
    };
    const { typePress } = this.state;

    const { selectedIndex, tintColor } = this.props;
    typePress[selectedIndex] = true;
    this.tintColors = tintColor;
  }

  renderSwipeView = types => {
    let { typePress } = this.state;
    const { onSelectChange, customSty = {} } = this.props;
    return (
      <View style={styles.typesView}>
        {types.map((item, i) => {
          const renderItem = (
            <View style={[styles.typesItem, { ...customSty }]}>
              <Text style={typePress[i] ? styles.active : styles.normal}>
                {item}
              </Text>
              <View style={styles.barCon}>
                <View style={typePress[i] ? styles.activeBar : null} />
              </View>
            </View>
          );
          return (
            <TouchableOpacity
              key={i}
              onPress={() => {
                const typeP = [false, false];
                typePress = typeP; // 初始化
                typePress[i] = true; // 设置选中状态
                this.setState({ typePress }); // 更新
                onSelectChange(i);
              }}
            >
              {renderItem}
            </TouchableOpacity>
          );
        })}
      </View>
    );
  };

  render() {
    const { values } = this.props;
    return (
      <View style={styles.root}>{this.renderSwipeView(values)}</View>
    );
  }
}

export default Tab;
